<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>我的课程</title>
	<link rel="stylesheet" href="../css/common.css">
	<style>
		body{
			background-color: #f5f5f5;
		}
		.myClass{
			padding: 1rem;
		}
		.classTitle{
			color: #888;
		}
		.classBox{
			display: flex;
			padding: 1rem 0;
			border-bottom: 1px solid #E4E4E4;
		}
		.classLeft{
			width: 9.0625rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem .5rem;
			box-sizing: border-box;
			font-size: 0.75rem;
		}
		.classIntro{
			width: 100%;
		}
		.className{
			color: #fff;
			font-weight: bold;
		}
		.fudao{
			color: #ddd;
		}
		.classLeft img{
			width: 1.4rem;
		}
		.classRight{
			margin-left: 1rem;
			width: 53%;
		}
		.r_title{
			font-weight: bold;
		}
		.r_shangci{
			color: #999;
			margin-top: .5rem;
		}
		.r_num{
			float: left;
			color: #999;
		}
		.r_goStudy{
			float: right;
			padding: 0 .5rem;
			font-size: 0.75rem;
			color: #FFFFFF;
			background-color: #0075FF;
			height: 1.3rem;
			line-height: 1.3rem;
			border-radius: 2rem;
		}
		.hotClass{
			margin-top: 1rem;
		}
		.hotBox{
			margin-top: 1rem;
		}
		.hotList{
			padding: .5rem;
			width: 44%;
			margin-right: 2%;
			margin-bottom: .5rem;
			background-color: #fff;
			float: left;
			border-radius: 4px;
			display: flex;
		}
		.hotList:nth-of-type(2n){
			margin-right: 0;
		}
		.hotList img{
			height: 4.375rem;
		}
		.hotDetail{
			width: 53.5%;
			margin-left: .5rem;
		}
		.hotTitle{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.zhangjie{
			font-size: 0.75rem;
			color: #999;
			margin: .3rem 0;
		}
		.h_study{
			font-size: 0.75rem;
			color: #999;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenters">学习</div>
			<!-- <div class="tabRight">收益说明</div> -->
		</div>
	</div>
	<div class="myClass">
		<div class="buyClass">
			<div class="classTitle">已购课程</div>
			<div class="classBox">
				<div class="classLeft pur">
					<div class="classIntro">
						<div class="className">抖音100W粉丝</div>
						<div class="fudao">外教一对一辅导</div>
					</div>
					<img src="../assets/add.png" >
				</div>
				<div class="classRight">
					<div class="r_title">抖音100W粉丝</div>
					<div class="r_shangci">上次学习: 第6/23章</div>
					<div class="r_stydy cleardrift">
						<div class="r_num">323人正在学</div>
						<div class="r_goStudy">去学习</div>
					</div>
				</div>
			</div>
			<div class="classBox">
				<div class="classLeft blue">
					<div class="classIntro">
						<div class="className">抖音100W粉丝</div>
						<div class="fudao">外教一对一辅导</div>
					</div>
					<img src="../assets/add.png" >
				</div>
				<div class="classRight">
					<div class="r_title">抖音100W粉丝</div>
					<div class="r_shangci">上次学习: 第6/23章</div>
					<div class="r_stydy cleardrift">
						<div class="r_num">323人正在学</div>
						<div class="r_goStudy">去学习</div>
					</div>
				</div>
			</div>
		</div>
		<div class="hotClass">
			<div class="classTitle">热门课程</div>
			<div class="hotBox cleardrift">
				<div class="hotList">
					<img src="../assets/meinv.png" >
					<div class="hotDetail">
						<div class="hotTitle">抖音变现课程</div>
						<div class="zhangjie">23章节</div>
						<div class="h_study">1.9w已学习</div>
					</div>
				</div>
				<div class="hotList">
					<img src="../assets/meinv.png" >
					<div class="hotDetail">
						<div class="hotTitle">抖音变现课程</div>
						<div class="zhangjie">23章节</div>
						<div class="h_study">1.9w已学习</div>
					</div>
				</div>
				<div class="hotList">
					<img src="../assets/meinv.png" >
					<div class="hotDetail">
						<div class="hotTitle">抖音变现课程</div>
						<div class="zhangjie">23章节</div>
						<div class="h_study">1.9w已学习</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
</html>